<script lang="ts" setup>
import { ref } from 'vue';
import { ElMessageBox } from 'element-plus';

const drawer = ref(false);
const direction = ref('rtl');
// rtl / ltr / ttb / btt
const radio1 = ref('Option 1');

function cancelClick() {
  drawer.value = false;
}
function confirmClick() {
  ElMessageBox.confirm(`Are you confirm to chose ${radio1.value} ?`)
    .then(() => {
      drawer.value = false;
    })
    .catch(() => {
      // catch error
    });
}
</script>
<template>
  <div>
    <el-button type="primary" @click="drawer = true"> open </el-button>
  </div>
  <!-- 带 header - body - footer( 不带footer => :with-header="false") -->
  <el-drawer v-model="drawer" :direction="direction">
    <template #header>
      <h4>set title by slot-header</h4>
    </template>
    <template #default>
      <div>
        <p>抽屉-drawer</p>
        <p>Drawer-body</p>
      </div>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="cancelClick">cancel</el-button>
        <el-button type="primary" @click="confirmClick">confirm</el-button>
      </div>
    </template>
  </el-drawer>
</template>
<style></style>
